<!--
 * @description: 镜头单图模式
 * @fileName: LensGrid
 * @author: 17076
 * @date: 2025/3/10-下午5:21
 * @version: V1.0.0
-->

<template>
  <div class="grid-content">
    <!--左侧tabs-->
    <div class="flex-column left-tabs">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="['flex-column', 'tabs-item', currentTabs === item.value ? 'tabs-item-active' : '']"
        @click="handleTabs(item)"
      >
        <svg-icon :icon-class="item.icon" />
        <span>{{ item.label }}</span>
      </div>
    </div>
    <!--右侧内容视图-->
    <div style="margin-left: 70px">
      <lens-tab v-if="currentTabs === '1'" :play-id="playId" />
      <roles-tab v-else-if="currentTabs === '2'" :play-id="playId" />
      <dialogue-tab v-else :play-id="playId" />
    </div>
  </div>
</template>

<script>
import GenerateHistory from '../others/GenerateHistory.vue'
import SelectLens from '../others/SelectLens.vue'
import LensTab from './lensTab/index.vue'
import RolesTab from './rolesTab/index.vue'
import DialogueTab from './dialogueTab/index.vue'
export default {
  name: 'LensGrid',
  components: { SelectLens, GenerateHistory, LensTab, DialogueTab, RolesTab },
  props: {
    playId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 当前选中的tabs
      currentTabs: '1',
      // 当前选中的
      tabs: [
        { label: '分镜', value: '1', icon: 'fenjing' },
        // { label: '角色', value: '2', icon: 'juese' },
        { label: '声音', value: '3', icon: 'huawaiyin' }
      ]
    }
  },
  methods: {
    // tabs 点击
    handleTabs(item) {
      if (this.currentTabs === item.value) return
      this.currentTabs = item.value
    }
  }
}
</script>

<style scoped lang="scss">
.grid-content {
  position: relative;
  margin-top: 10px;
  .left-tabs {
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    .tabs-item {
      cursor: pointer;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 1px solid transparent;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      background: #1D2129;
      color: #FFFFFF;
      &:hover {
        color: $base-color-default;
        border-color: $base-color-default;
      }
      &-active {
        color: $base-color-default;
        border-color: $base-color-default;
      }
      .svg-icon {
        width: 25px;
        height: 25px;
      }
      span {
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }
}
::v-deep {
  .el-collapse, .el-collapse-item__wrap {
    border: none;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #FFFFFF;
  }
}
</style>
